<template>
    <div class='app-container'>
        <div style='border: 1px solid #ccc'>
            <Toolbar
                style='border-bottom: 1px solid #ccc'
                :editor='editor'
                :defaultConfig='toolbarConfig'
                :mode='mode'
            />
            <Editor
                style='height: 600px; overflow-y: hidden;'
                v-model='html'
                :defaultConfig='editorConfig'
                :mode='mode'
                @onCreated='onCreated'
            />
        </div>
        <div class='save'>
            <el-button type='primary' @click="save">保存</el-button>
        </div>
    </div>
</template>


<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import apis from '@/api/apis';
import constVal from '@/api/const';

export default {
    components: {
        Editor,
        Toolbar
    },
    created() {
    },
    data() {
        return {
            editor: null,
            html: '<p></p>',
            toolbarConfig: {},
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    // 配置上传图片
                    uploadImage: {
                        server: constVal.FileUploadInterface(),
                        fieldName: 'file',
                        customInsert(res, insertFn) {
                            console.log(res);
                            insertFn(res.url, '');
                        }
                    },
                    //配置上传视频
                    uploadVideo: {
                        customUpload: this.uploadVideo
                    },
                    codeSelectLang: {
                        // 代码语言
                        codeLangs: [
                            { text: 'CSS', value: 'css' },
                            { text: 'HTML', value: 'html' },
                            { text: 'XML', value: 'xml' },
                            { text: 'Java', value: 'java' }
                            // 其他
                        ]
                    }
                }
            },
            mode: 'default' // or 'simple'
        };
    },
    methods: {
        save(){
            this.$emit('saveHtml', this.html)
        },
        setHtml(html){
            this.html = html
        },
        onCreated(editor) {
            this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
        },
        //上传视频
        uploadVideo(file, insertFn) {
            this.files = file;
            //FormData 对象
            var formData = new FormData();
            formData.append('file', this.files);
            apis.upload(formData).then((res) => {
                insertFn(res.url, '');
            });
        },

    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 组件销毁时，及时销毁编辑器
    }
};
</script>
<style src='@wangeditor/editor/dist/css/style.css'>

</style>
<style>
.save{
    display: flex;
    justify-content: right;
}
</style>
